<template>
<div>
  <Modal
    v-model="visible"
    title="修改密码"
    :mask-closable="false"
    :loading="loading">
    <Row type="flex" justify="center" align="middle">
      <Tabs v-model="formName">
        <TabPane label="手机号码修改" name="editPasswdPhone" icon="md-phone-portrait">
          <Form ref="ruleForm" :model="editPasswdForm" :rules="ruleValidate" :label-width="80">
            <FormItem label="手机号码" prop="phone">
              <Input v-model="editPasswdForm.phone" placeholder="请输入手机号码"></Input>
            </FormItem>
            <FormItem label="验证码" prop="smsCode">
              <Row type="flex">
                <Input style="width: 70%" v-model="editPasswdForm.smsCode" placeholder="请输入短信验证码"></Input>
                <Button style="margin-left: 10px;" :disabled="clickFlag" @click="sendSmsCode" size="large">{{text}}</Button>
              </Row>
            </FormItem>
            <FormItem label="原密码" prop="password">
              <Input v-model="editPasswdForm.password" type="password" placeholder="请输入密码"/>
            </FormItem>
            <FormItem label="确认密码" prop="newPassword">
              <Input v-model="editPasswdForm.newPassword" type="password"  placeholder="请再次输入密码"/>
            </FormItem>
            <FormItem label="确认密码" prop="confirmPassword">
              <Input v-model="editPasswdForm.confirmPassword" type="password"  placeholder="请再次输入密码"/>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="邮箱修改" name="editPasswdEmail" icon="md-mail">
          <Form ref="emailForm" :model="editPasswdForm" :rules="ruleValidate" :label-width="80">
            <FormItem label="邮箱" prop="email">
              <Input v-model="editPasswdForm.email" placeholder="请输入手机号码"></Input>
            </FormItem>
            <FormItem label="原密码" prop="password">
              <Input v-model="editPasswdForm.password" type="password" placeholder="请输入密码"/>
            </FormItem>
            <FormItem label="确认密码" prop="newPassword">
              <Input v-model="editPasswdForm.newPassword" type="password"  placeholder="请再次输入密码"/>
            </FormItem>
            <FormItem label="确认密码" prop="confirmPassword">
              <Input v-model="editPasswdForm.confirmPassword" type="password"  placeholder="请再次输入密码"/>
            </FormItem>
          </Form>
        </TabPane>
      </Tabs>
    </Row>
    <div class="demo-drawer-footer">
      <Button type="primary" style="margin-right: 8px" :loading="submitLoading" @click="submitForm">{{$t("submit")}}</Button>
      <Button  @click="close">{{$t("close")}}</Button>
    </div>
  </Modal>
</div>
</template>

<script>
/**
 * TODO
 * @version 1.0
 * @author 子丶沫
 * @date 2020/12/3 16:37
 */
import {sendCode} from "@/api/login";
import {checkUserExists} from "@/api/user";
import {isNull} from "@/libs/tools";

export default {
  name: "EditPasswd",
  data(){
    const validatePass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不得小于6位'));
      } else {
        callback();
      }
    };
    const validateConfirmPass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不得小于6位'));
      } else if(this.form.password!=value) {
        callback(new Error("两次输入的密码不一致"));
      }else{
        callback()
      }
    };
    const validatePhone = (rule, value, callback) => {
      var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error('手机号格式错误'));
      } else {
        checkUserExists(value).then(res=>{
          if(res.code===200){
             if(res.data){
               callback();
             }else{
               callback(new Error('手机号码不存在'));
             }
          }
        })
      }
    };
    const validateMail=(rule, value, callback)=>{
      let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if(typeof(value)!='undefined'){
        if (!reg.test(value)) {
          callback(new Error('邮箱格式不正确'));
        } else {
          callback();
        }
      }else{
        callback()
      }
    };
    return{
      visible: false,
      loading: true,
      submitLoading:false,
      clickFlag:false,
      formName:'editPasswdPhone',
      text:'获取验证码',
      editPasswdForm: {
        newPassword:'',
      },
      count:60,
      ruleValidate: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {validator:validatePhone,trigger: 'blur'}
        ],
        smsCode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' },
        ],
        email:[
          {required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {validator:validateMail}
        ],
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          {validator:validatePass,trigger: 'blur'}
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {validator:validatePass,trigger: 'blur'}
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {validator:validateConfirmPass,trigger: 'blur'}
        ],
      }
    }
  },
  methods:{
    submitForm () {
      if(this.formName=='editPasswdPhone'){
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      }else{
        this.$refs['emailForm'].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      }
    },
    handleReset () {
      this.$refs['ruleForm'].resetFields();
    },
    close(){
      this.visible=false;
    },
    editSuccess(){

    },
    countDown(){
      let that = this;
      if (this.count == 0) {
        this.text='获取验证码';
        this.clickFlag=false;
        this.count=60
        return ;
      } else {
        this.text = this.count + " 秒后重试";
        this.count--;
        this.clickFlag=true;
      }
      setTimeout(function() {
        that.countDown();
      }, 1000);
    },
    sendSmsCode(){
      this.$refs['ruleForm'].validateField('phone', (phoneError) => {
        if(!phoneError){
          sendCode(this.editPasswdForm.phone).then(res=>{
            if(res.code===200){
              this.$Message.success('发送成功.');
              this.countDown();
            }
          })
        }
      })
    }
  },
  mounted(){

  }
}
</script>

<style scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
